<template lang="html">
<div class="xheader">
    <div class="xbackground">
        <img :src="seller.avatar" width="100%" height="100%">
    </div>
    <div class="xcontent-wrapper">
        <div class="xavatar">
            <img :src="seller.avatar" width="64px" height="64px" />
        </div>
        <div class="xcontent">
            <div class="xtitle">
                <span class="xbrand"></span>
                <span class="xname">{{seller.name}}</span>
            </div>
            <div class="xdescription">
                {{seller.description + ' / ' + seller.deliveryTime + '分钟送达'}}
            </div>
            <div class="xsupports" v-if="seller.supports">
                <span class="xicon" :class="iconClassMap[seller.supports[0].type]"></span>
                <span class="xtext">{{seller.supports[0].description}}</span>
            </div>
        </div>
        <div class="xsupport-count">
           
        </div>
    </div>
    <div class="xbulletin-wrapper">
        <span class="xbulletin-title"></span>
        <span class="xbulletin-text">{{seller.bulletin}}</span>
        <i class="xicon-keyboard_arrow_right"></i>
    </div>
</div>
</template>

<script type="text/javascript">
export default {
    props: {
        seller: {
            type: Object
        }
    },
    data() {
        return {
            iconClassMap: [],
            detailShow: false
        }
    },
    created() {
        this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    },
    methods: {
        showDetails() {
            this.detailShow = true;
        },
        hideDetail() {
            this.detailShow = false;
        }
    },
    components: {

    }
}
</script>

<style lang="scss" scoped>
 @import '../../common/sass/base.scss';
 @import '../../common/sass/function.scss';

.xheader {
    position: relative;
    background: rgba(7, 17, 27, 0.5);
    color: white;
    overflow: hidden;
    .xbackground {
        position: absolute;
        top: 50;
        left: 50;
        width: 100%;
        height: 100%;
        filter: blur(10px);
        z-index: -99;
    }
    .xcontent-wrapper {
        position: relative;
        display: flex;
        padding: 24px 12px 20px 24px;
        font-size: 12px;
        .xavatar {
            img {
                border-radius: 2px;
            }
        }
        .xcontent {
            margin-left: 16px;
            .xtitle {
                .xbrand {
                    display: inline-block;
                    vertical-align: top;
                    width: 30px;
                    height: 18px;
                    @include img-dpr('img/brand');
                    background-size: 30px 18px;
                    background-repeat: no-repeat;
                }
                .xname {
                    margin-left: 6px;
                    font-size: 16px;
                    line-height: 18px;
                    font-weight: bold;
                }
            }
            .xdescription {
                font-size: 12px;
                margin-top: 10px;
            }
            .xsupports {
                margin-top: 10px;
                .xicon {
                    display: inline-block;
                    vertical-align: top;
                    width: 12px;
                    height: 12px;
                    margin-right: 4px;
                    background-size: 12px 12px;
                    background-repeat: no-repeat;
                    &.decrease {
                        @include img-dpr('img/decrease_1');
                    }
                    &.discount {
                        @include img-dpr('img/discount_1');
                    }
                    &.guarantee {
                        @include img-dpr('img/guarantee_1');
                    }
                    &.invoice {
                        @include img-dpr('img/invoice_1');
                    }
                    &.special {
                        @include img-dpr('img/special_1');
                    }
                }
                .xtext {
                    line-height: 12px;
                    font-size: 10px;
                }
            }
        }
        .xsupport-count {

        }
    }
    .xbulletin-wrapper {
        position: relative;
        height: 28px;
        line-height: 28px;
        padding: 0 22px 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: rgba(7, 17, 27, 0.2);
        .xbulletin-title {
            display: inline-block;
            vertical-align: top;
            margin-top: 8px;
            width: 22px;
            height: 12px;
            @include img-dpr('img/bulletin');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .xbulletin-text {
            font-size: 10px;
            vertical-align: baseline;
            margin: 0 4px;
        }
        .xicon-keyboard_arrow_right {
            position: absolute;
            font-size: 10px;
            right: 12px;
            top: 8px;
        }
    }
}
  
        
</style>